<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!-- css样式-->
		<link rel="stylesheet" href="layui/css/layui.css" />
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<table class="layui-table" id="tableOut" lay-filter="tableOut"></table>

		<script language="javascript" type="text/javascript" src="layui/layui.all.js"></script>
		
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function($, laydate, util, layer, table, form) {
				var tableData = [
					[1, '小明', 16],
					[2, '小红', 18]
				];

				// 假释真的需要默认点击搜索在下面table render过之后再调用$dom.click()即可
				//监听工具条
				table.on('tool(tableOut)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					// 异常不要用它原来的这个作为tr的dom
					// var tr = obj.tr; //获得当前行 tr 的DOM对象
					var $this = $(this);
					var tr = $this.parents('tr');
					var trIndex = tr.data('index');
					if (layEvent === 'detail') { //查看
						//do somehing
						console.log(data);
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if (layEvent === 'edit') { //编辑
						//do something

						//同步更新缓存对应的值
						obj.update({
							name: '123',
							title: 'xxx'
						});
					} else if (layEvent === 'addRowTable') {
						// 外围的table的id + tableIn_ + 当前的tr的data-index
						$(this).attr('lay-event', 'fold').html('-');
						var tableId = 'tableOut_tableIn_' + trIndex;

						var _html = [
							'<tr class="table-item">',
							'<td colspan="' + tr.find('td').length + '" style="padding: 6px 12px;">',
							'<table id="' + tableId + '"></table>',
							'</td>',
							'</tr>'
						];
						tr.after(_html.join('\n'));
						// 渲染table
						table.render({
							elem: '#' + tableId,
							data: data.friend || [],
							cols: [
								[{
										field: 'id',
										title: 'ID'
									},
									{
										field: 'name',
										title: '朋友姓名'
									},
									{
										field: 'age',
										title: '年龄'
									}
								]
							],

						});
						// $(window).resize();

					} else if (layEvent === 'fold') {
						$(this).attr('lay-event', 'addRowTable').html('+');
						tr.next().remove();
					}
				});
				var tableIns = table.render({
					elem: '#tableOut',
					// data: [[1, '小明', 16],[2, '小红', 18]],
					data: [{
							id: 1,
							name: '小米',
							age: '16',
							friend: [{
								id: 2,
								name: '大米',
								age: '28'
							}, {
								id: 5,
								name: '小虎',
								age: '16'
							}]
						},
						{
							id: 2,
							name: '大米',
							age: '28',
							friend: [{
								id: 1,
								name: '小米',
								age: '28'
							}]
						},
						{
							id: 3,
							name: '小花',
							age: 0
						},
						{
							id: 4,
							name: '小甲',
							age: '28'
						},
						{
							id: 5,
							name: '小虎',
							age: '16'
						},
						{
							id: 6,
							name: '小贤',
							age: '28'
						}
					],
					page: {},
					cols: [
						[
							// {type: 'number', fixed: true},
							// {field: 'checkbox', type: 'checkbox', LAY_CHECKED:false, fixed: true},
							{
								field: 'btn',
								width: 50,
								align: 'center',
								templet: function(d) {
									return '<a style="width: 100%; height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>'
								}
							},
							{
								field: 'id',
								title: 'ID',
								sort: true
							},
							{
								field: 'name',
								title: '名称',
								edit: true
							},
							{
								field: 'age',
								title: '年龄',
								sort: true
							}
						]
					],

				});
				table.on('sort(tableOut)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					//尽管我们的 table 自带排序功能，但并没有请求服务端。
					//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
					table.reload('tableOut', {
						initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
							,
						where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
							field: obj.field //排序字段
								,
							order: obj.type //排序方式
						}
					});
				});
				table.on('edit(tableOut)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
					// debugger;
					// this;
					console.log(obj.value); //得到修改后的值
					console.log(obj.field); //当前编辑的字段名
					console.log(obj.data); //所在行的所有相关数据
				});
			});
		</script>
	</body>
</html>
